/**
* 作者 ：sunmeng
*
* 日期 ：2017/11/24
*
* 描述 ：系统管理组件 - 添加部门
*/
<template>
  <div class="dialogContent">
    <el-form class="addDepartmentForm" :rules="rules" label-position="right" label-width="110px" :model="ruleForm" ref="addDepartmentForm">
      <el-row class="dialogBar">
        <el-col class="title">部门管理</el-col>
      </el-row>
      <el-form-item label="部门名称 :" prop="name" style="margin-top: 20px;">
        <el-input v-model="ruleForm.name" class="shortText"></el-input>
      </el-form-item>
      <el-form-item label="部门编号 :" prop="code" style="margin-top: 20px;">
        <el-input v-model="ruleForm.code" class="shortText"></el-input>
      </el-form-item>
      <el-form-item label="部门描述 :" prop="description">
        <el-input type="textarea" v-model="ruleForm.description" class="longText" rows="5"></el-input>
      </el-form-item>
      <el-form-item label="类别 :" prop="type" style="margin-top: 20px;">
        <el-select v-model="ruleForm.type" placeholder="请选择">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		</el-select>
      </el-form-item>
      <el-form-item label="上级部门 :" prop="parentId" style="margin-top: 20px;">
        <el-col :span="8">
          <el-cascader
            placeholder="请选择"
            expand-trigger="hover"
            :options="departmentOptions"
            v-model="departmentGroup"
            change-on-select>
          </el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item label-width="0px" style="margin-top: 20px;text-align: center;">
        <el-button class="moduleButton button" :plain="true" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button class="button" type="info" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import departmentAPIs from '../../../../api/departmentAPIs'
  export default {
    props: ["parentModel"],
    name: "addDepartmentForm",
    data () {
      return {
        ruleForm: {
          name: "",
          code: "",
          description: "",
          type: "",
          parentId: "",
          token: localStorage.token
        },
        rules:{
        	name: [
            { required: true, message: '请输入部门名称', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入部门编码', trigger: 'blur' }

          ],
          type: [
            { required: true, message: '请选择部门类别', trigger: 'blur' }
          ]
        },
        options: [{
          value: '1',
          label: '部门'
        }, {
          value: '2',
          label: '单位'
        }, {
          value: '3',
          label: '组织'
        }],
        departmentOptions: [],
        departmentGroup: []
      }
    },
    mounted: function () {
      let vm = this
      departmentAPIs.listTree({
        token: localStorage.token
      }).then(({ data }) => {
        if(data.code == 10000) {
          vm.departmentOptions = data.data
        }
      })
    },
    methods: {
      submitForm(formName) {
        let vm = this
        vm.$refs.addDepartmentForm.validate((valid) => {
          if (valid) {
						vm.ruleForm.parentId = vm.departmentGroup.length>0 ? vm.departmentGroup.pop() : ""
	        	departmentAPIs.insert(vm.ruleForm).then(({data}) => {
		          if(data.code==10000){
		            vm.$message.success("添加部门成功！");
		            vm.$refs.addDepartmentForm.resetFields()
		            vm.$parent.visible = false

		            vm.$props.parentModel.tableOptions.pageInfo.currentPage = 1
		            vm.$props.parentModel.loadData(vm.$props.parentModel.tableOptions.pageInfo.currentPage, vm.$props.parentModel.tableOptions.pageInfo.pageSize)
	          	}
	          })
          } else {
            return false;
          }
        });



      },
      resetForm() {
        let vm = this
        vm.$refs.addDepartmentForm.resetFields()
        vm.$parent.visible = false
      }
    }
  }
</script>
<style>
  .dialogContent .dialogBar{
    height: 35px;
    line-height: 35px;
    background-color: #ebebeb;
    border-left: 4px solid #2cace2;
    text-align: left;
    width: 97%;
    margin: 0 auto;
  }
  .dialogContent .dialogBar .title{
    margin-left: 10px;
    color: #2cace2;
    font-size: 1.8rem;
  }
  .dialogContent .shortText{
  	width: 45%;
  }
  .dialogContent .longText {
    width: 96%;
  }
  .addDepartmentForm .button{
  	width: 112px;
  	height: 36px;
  	padding: 0;
  }
  .addDepartmentForm button:first-child{
  	margin-right: 60px;
  }
</style>
